<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>商品筛选</title>
<style>
ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container{
            width: 768px;
            border: 1px solid #ccc;
        }
        li{
            border-bottom: 1px dashed #dfdfdf;
            font-size: 14px;
            overflow: hidden;
        }
        li:last-child{
            border: none;
        }
        li .name{
            float: left;
            width: 100px;
            height: 25px;
            text-align: right;
            padding-top: 15px;
            font-weight: bold;
        }
        li .intro{
            float: left;
            width: 668px;
            padding-top: 12px;
        }
        li .intro a{
            text-decoration: none;
            display: inline-block;
            padding: 3px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        /*选中时的样式*/
        li .intro a.selector,
        li .intro a:hover{
            background-color: #f63;
            color: white;
        }
        li.choose .intro span{
            border: 1px solid #f63;
            padding: 3px;
            margin-right: 10px;
            cursor: pointer;
            display: none;
        }
        li.choose .intro span em{
            font-style: normal;
            color: #ccc;
        }
        li.choose .intro span:hover em{
            color: #f63;
        }
</style>
</head>
<body>
    <div class="container">
        <ul>
            <!--(li>span.name{品牌:}+(span.intro>a[href=javascript:;])*8)*6-->
             <li>
                <span class="name">品牌:</span>
                <span class="intro">
                <a href="javascript:;">苹果</a>
                <a href="javascript:;">小米</a>
                <a href="javascript:;">华为</a>
                <a href="javascript:;">联想</a>
                <a href="javascript:;">中兴</a>
                <a href="javascript:;">三星</a>
                <a href="javascript:;">魅族</a>
                <a href="javascript:;">酷派</a>
                <a href="javascript:;">诺基亚</a>
                <a href="javascript:;">苹果</a>
                <a href="javascript:;">小米</a>
                <a href="javascript:;">华为</a>
                <a href="javascript:;">联想</a>
                <a href="javascript:;">中兴</a>
                <a href="javascript:;">三星</a>
                <a href="javascript:;">魅族</a>
                <a href="javascript:;">酷派</a>
                <a href="javascript:;">诺基亚</a>
                <a href="javascript:;">苹果</a>
                <a href="javascript:;">小米</a>
                <a href="javascript:;">华为</a>
                <a href="javascript:;">联想</a>
                <a href="javascript:;">中兴</a>
                <a href="javascript:;">三星</a>
                <a href="javascript:;">魅族</a>
                <a href="javascript:;">酷派</a>
                <a href="javascript:;">诺基亚</a>
            </span></li>
            <li>
               <span class="name">价格:</span>
               <span class="intro">
                <a href="javascript:;">500元以下</a>
                <a href="javascript:;">500-1000元</a>
                <a href="javascript:;">1000-1500元</a>
                <a href="javascript:;">1500-2000元</a>
                <a href="javascript:;">2000-3000元</a>
                <a href="javascript:;">3000-4000元</a>
                <a href="javascript:;">4000元以上</a>
            </span></li>
            <li>
                <span class="name">主屏尺寸:</span>
                <span class="intro">
                <a href="javascript:;">6.0英寸以上</a>
                <a href="javascript:;">5.5-6.0英寸</a>
                <a href="javascript:;">5.0-5.5英寸</a>
                <a href="javascript:;">4.5-5.0英寸</a>
                <a href="javascript:;">4.0-4.5英寸</a>
                <a href="javascript:;">4.0英寸以下</a>
            </span></li>
            <li>
                <span class="name">网络:</span>
                <span class="intro">
                <a href="javascript:;">全网通</a>
                <a href="javascript:;">双4G</a>
                <a href="javascript:;">移动4G</a>
                <a href="javascript:;">联通4G</a>
                <a href="javascript:;">电信4G</a>
            </span></li>
            <li>
                <span class="name">核心数:</span>
                <span class="intro">
                <a href="javascript:;">十核</a>
                <a href="javascript:;">八核</a>
                <a href="javascript:;">双四核</a>
                <a href="javascript:;">四核</a>
                <a href="javascript:;">电信4G</a>
            </span></li>
            <li>
                <span class="name">特性:</span>
                <span class="intro">
                <a href="javascript:;">大屏幕</a>
                <a href="javascript:;">双卡双待</a>
                <a href="javascript:;">指纹识别</a>
                <a href="javascript:;">千元机</a>
                <a href="javascript:;">拍照神器</a>
            </span></li>
             <li class="choose">
            <span class="name">您已选择:</span>
            <span class="intro">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </span>
        </li>
        </ul>
    </div>
</body>
<html>
<script>
    $('li .intro a').click(function(){
        //给选中的a标签添加selector类名,未选中的移除类名
        $(this).addClass('selector').siblings().removeClass('selector'); 
        // 获取被选中的<a>所在行<li>的索引值 
        var li_index = $(this).parents('li').index();
        var text = $(this).text() + '<em>&times;</em>';
        //把对应行<li>内的<a>的内容插入到对应的<span>内 
        //这样写同时解决两个问题：修改选项内容同步,每个li对应一个span 
        $('.choose .intro span').eq(li_index).html(text).css('display','inline-block');
        //点击已选择的span关闭
        $('.choose .intro span').click(function(){
            var index = $(this).index();
            //移除对应行的所有<a>的类名 
            $('li').not('.choose').eq(index)
            .find('.intro a').removeClass('selector');
            //清空选中的span的内容并隐藏 
            $(this).empty().css('display','none');
            clearAll();
        });
        //执行之前先清空一次避免点一次出现一次 
        clearAll();
        function clearAll(){
        $('#clear').remove();
        //获取已经选中的选项的个数(就是span标签不为空的个数) 
        var length = $('.choose .intro span').not(':empty').length;
        // console.log(length);
        if(length > 0){
            var clear = '<a href="javascript:;" id="clear" class="clear">清空筛选条件</a>'
            $('.choose .intro').append(clear);
            
            //点击清空按钮,清除所有选项及样式
            $('#clear').click(function(){
                //清空选项 
               $('.choose .intro span').html('').css('display','none');
                //清空所有a标签的样式    
               $('li').not('.choose').find('.intro a').removeClass('selector');
               //移除自身    
               $(this).remove();
            }); 
          }
        }
         
    });
</script>